<template>
  <div>
    <div
      v-if="areaData.length"
      ref="mapCharts"
      v-loading="loading"
      style="width: 100%; height: 400px"
    />
    <el-empty v-else :description="$t('暂无数据')" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import webApi from '@/api/website'
import '@/echarts/map/js/china'
export default {
  props: ['siteId', 'type'],
  data() {
    return {
      areaData: [],
      maxValue: '',
      loading: false,
      site_id: '',
      timetype: ''
    }
  },
  watch: {
    type: {
      handler(Ndata, Odata) {
        this.timetype = Ndata
        this.$nextTick(() => {
          this.getArea()
        })
      },
      immediate: true
    },
    // 监听到数据变化以后 重新调用一下
    siteId: {
      handler(val, value) {
        this.site_id = val
        this.$nextTick(() => {
          this.getArea()
        })
      },
      immediate: true
    }
  },

  methods: {
    // 用户地区分步
    getArea() {
      this.loading = true
      webApi
        .indexArea({ website_id: this.site_id, type: this.timetype })
        .then(res => {
          const arr = []
          const arr2 = []
          res.data.forEach(el => {
            if (el.name.indexOf('省') == -1) {
              arr.push({
                name: el.name,
                value: el.value,
                pv_ratio: el.pv_ratio
              })
            } else {
              arr.push({
                name: el.name.slice(0, -1),
                value: el.value,
                pv_ratio: el.pv_ratio
              })
            }
            arr2.push(el.value)
          })
          this.areaData = arr
          if (this.areaData.length) {
            this.$nextTick(() => {
              this.init() // 执行echarts
            })
          }
          arr2.sort((a, b) => {
            return b - a
          })
          // 排序 取到最大值
          this.maxValue = arr2[0]
          this.loading = false
        })
    },

    init() {
      const that = this
      var option = {
        tooltip: {
          trigger: 'item',
          formatter(e) {
            var name = e.name ? e.name : that.$t('获取中')
            var value = e.value ? e.value : that.$t('暂无数据')
            var pv_ratio = e.data ? e.data.pv_ratio : that.$t('暂无数据')
            if (e.value) {
              return `${name}:<br>
              ${that.$t('浏览量')}:${value}
              <br>
              ${that.$t('占比')}:${pv_ratio}% `
            }
          }
        },

        visualMap: {
          min: 0,
          max: this.maxValue,
          left: 'left',
          top: 'bottom',
          text: [this.$t('高'), this.$t('低')],
          calculable: true, // 显示高低数值
          inRange: {
            color: ['#FFF2E5', '#FFD8B2', '#FFB166', '#FF7D00']
          }
        },
        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            normal: {
              show: false, // 展示省份名
              color: '#c1c4c8'
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#f5f5f9',
              borderColor: '#fff'
            }
          }
        },
        series: [
          {
            type: 'map',
            mapType: 'china',
            geoIndex: 0,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: this.areaData
          }
        ]
      }
      var myEcharts = echarts.init(this.$refs.mapCharts)
      myEcharts.setOption(option)
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    }
  }
}
</script>

<style scoped></style>
